<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例</title>
</head>
<body>
    <!-- 指令（Directives） 是Vue.js 模板中最常用的功能，使用前缀 v- ，比如 v-if、v-html、v-pre 等 -->

    <!-- v-on -->
        <!-- 绑定事件监听器 -->
    <div id="app">
        <p v-if="show">这是一段文本</p>
        <button v-on:click="handleClose">{{ buttonText }}</button>

        <!--
            事件除了可以调用 Vue 实例中的方法外，还可以直接指定表达式
            如果绑定的事件要处理复杂的业务逻辑，建议还是在 Vue 实例的 methods 属性中声明一个方法，这样可读性更强也好维护
        -->
        <!--<button v-on:click="show = false">{{ buttonText }}</button>-->

        <!--
            在 button 按钮上使用 v-on:click 给元素绑定了一个点击事件，在普通元素上，v-on 可以监听原生的 DOM 事件，除了
            click 外，还有 dblclick、keyup、mousemove 等

            handleClose 是一个方法名，在 Vue 实例的 methods 属性中定义

         -->
    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>

        var app = new Vue({
            el: "#app",
            data: {
                show: true,
                buttonText: "点击隐藏"
            },
            methods: {
                handleClose: function () {
                    if (this.show){
                        this.show = false;
                        this.buttonText = "点击显示"
                    }else {
                        this.show = true;
                        this.buttonText = "点击隐藏"
                    }

                }
            }
        });

    </script>

</body>
</html>